<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>company show</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <script src="../js/angular-1.4.6.min.js"></script>
    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .banner{background-position: center;background-size: cover;display: table;}
        .banner div{height: 430px;background-color: rgba(255, 255, 255, 0.6);display: table-cell;vertical-align: middle;}
        .banner div .b-title{font-size: 42px;}
        .banner div .b-word1{color: #666;margin: 25px 0;font-size: 26px;}
        .banner div .b-word2{font-size: 20px;color: #666;letter-spacing: 1px;}

        .content .box{overflow: hidden;margin-top: 50px;}
        .content .box img{float: left;width: 140px;height: 140px;margin: 5px;}

        .modal{display: none;position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 9999;background-color: rgba(0, 0, 0, 0.50);}
        .modal .modal-box{position: absolute;left: 20%;top: 10%;right: 20%;bottom: 10%;background-size: contain;
            background-position: center;background-repeat: no-repeat;}
        .modal .close{position: absolute;top: 0;right: -50px;cursor: pointer;}
        .modal .close img{width: 30px;}
        .modal .prev,.modal .next{height: 40px;position: absolute;top: 50%;margin: -20px;cursor: pointer;}
        .modal .prev{left: -40px;}
        .modal .next{right: -40px;}
    </style>
</head>
<body ng-app="">
<!--公共头部-->
<div ng-include="'../html/header.html'"></div>
<div class="banner container-fluid" style="background-image: url('../img/vimostsports（FAQS-）伸展页_02.jpg')">
    <div class="container-fluid text-center">
        <p class="b-title text-uppercase bold">gallery</p>
        <p class="b-word1 text-uppercase bold">IF YOU HAVE ANY QUESTIONS TAKE A QUICK LOOK IN OUR FAQ＇S FOR THE ANSWERS.</p>
        <p class="b-word2">Welcome to the Banana Moon Gallery. We have examples of our previous work for you to take inspiration and see what is possible. We also have a large range of stock logos available in a number of different categories. Stock Logos are great, because you can have your own text around them and there are no setup fees!</p>
    </div>
</div>
<div class="mid-title container-fluid b-red text-center fs-14 white">ORDER NOW WITH FAST TRACK FOR DELIVERY BY Thursday 9th. STANDARD UK TURNAROUND – APPROX 6 to 8 WORKING DAYS<img src="../img/vimostsports_36.jpg"></div>
<div class="bread container-fluid">
    <div class="container clear">
        <div class="fl path">
            <p class="fs-18"><em>You are here:&nbsp;</em><a href="" class="text-capitalize">Home</a>&nbsp;>&nbsp;<span class="bold red text-capitalize">company show</span></p>
        </div>
        <div class="fr">
            <div class="btn b-red white fs-14 bold">JUMP TO<img src="../img/vimostsports（About-Us-）_03.jpg" alt=""/></div>
            <ul class="list fs-14 text-capitalize">
                <li>
                    <a href="">about us</a>
                </li>
                <li>
                    <a href="">gallery</a>
                </li>
                <li>
                    <a href="">sublimation</a>
                </li>
                <li>
                    <a href="">how to order</a>
                </li>
                <li>
                    <a href="">order process</a>
                </li>
                <li>
                    <a href="">fabric guide</a>
                </li>
                <li>
                    <a href="">blog</a>
                </li>
                <li>
                    <a href="">FAQS</a>
                </li>
                <li>
                    <a href="">customer reviews</a>
                </li>
                <li>
                    <a href="">contact us</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="content container">
    <div class="box">
        <img src="../img/vimostsports（About-Us-）_07.jpg" alt=""/>
        <img src="../img/vimostsports（blog）_23.png" alt=""/>
        <img src="../img/vimostsports（blog）_24.png" alt=""/>
        <img src="../img/vimostsports（blog）_28.png" alt=""/>
        <img src="../img/vimostsports（blog）_29.png" alt=""/>
        <img src="../img/vimostsports（blog）_30.png" alt=""/>
        <img src="../img/vimostsports（Accessories）_09.jpg" alt=""/>
        <img src="../img/vimostsports（About-Us-）_11.jpg" alt=""/>
        <img src="../img/vimostsports（About-Us-）_07.jpg" alt=""/>
        <img src="../img/vimostsports（blog）_23.png" alt=""/>
        <img src="../img/vimostsports（blog）_24.png" alt=""/>
        <img src="../img/vimostsports（blog）_28.png" alt=""/>
        <img src="../img/vimostsports（blog）_29.png" alt=""/>
        <img src="../img/vimostsports（blog）_30.png" alt=""/>
        <img src="../img/vimostsports（Accessories）_09.jpg" alt=""/>
        <img src="../img/vimostsports（About-Us-）_11.jpg" alt=""/>
        <img src="../img/vimostsports（About-Us-）_07.jpg" alt=""/>
        <img src="../img/vimostsports（blog）_23.png" alt=""/>
        <img src="../img/vimostsports（blog）_24.png" alt=""/>
        <img src="../img/vimostsports（blog）_28.png" alt=""/>
        <img src="../img/vimostsports（blog）_29.png" alt=""/>
        <img src="../img/vimostsports（blog）_30.png" alt=""/>
        <img src="../img/vimostsports（Accessories）_09.jpg" alt=""/>
        <img src="../img/vimostsports（About-Us-）_11.jpg" alt=""/>
    </div>
</div>
<div class="modal">
    <div class="modal-box">
        <div class="close"><img src="../img/vimostsports（Custom-Lable）-tantianniu_03.png" alt=""/></div>
        <div class="prev"><img src="../img/vimostsports（Custom-Lable）-tantu2_07.png" alt=""/></div>
        <div class="next"><img src="../img/vimostsports（Custom-Lable）-tantu3_09.png" alt=""/></div>
    </div>
</div>
<!--公共底部-->
<div ng-include="'../html/footer.html'"></div>
</body>
<script>
    var slide = {
        index: 0,
        arr: [],
        init:function(){
            var len = $('.box img').length;
            for(var i=0;i<len;i++){
                var img = ($('.box img').eq(i).attr('src'));
                slide.arr.push(img);
            }
            this.bind();
        },
        bind:function(){
            $('.box img').on('click',function(){
                slide.index = parseInt($(this).index());
                $('.modal-box').css('background-image','url('+slide.arr[slide.index]+')');
                $('.modal').fadeIn();
            });
            $('.prev').on('click',function(){
                slide.prev();
            });
            $('.next').on('click',function(){
                slide.next();
            });
            $('.close').on('click',function(){
                slide.close();
            })
        },
        prev:function(){
            var _ind = slide.index-=1;
            if(_ind == -1){
                slide.index = slide.arr.length-1;
                _ind = slide.index;
            }
            $('.modal-box').css('background-image','url('+slide.arr[_ind]+')');
        },
        next:function(){
            var _ind = slide.index+=1;
            if(_ind == slide.arr.length){
                slide.index = 0;
                _ind = slide.index;
            }
            $('.modal-box').css('background-image','url('+slide.arr[_ind]+')');
        },
        close:function(){
            $('.modal').fadeOut();
        }
    };
    $(function(){
        slide.init();
    });
</script>
<script src="../js/scroll_top.js"></script>
</html>